<template>
  <div>
    <a-row :gutter="[24, 12]" style="margin-bottom: 20px">
      <!--<div-->
      <!--    v-for="(item,index) in questionData "-->
      <!--    :key = "index"-->
      <!--    :span="28"-->
      <!--    >-->
      <!--    &lt;!&ndash;style="margin-bottom: 15px"&ndash;&gt;-->

      <!--  &lt;!&ndash;<p>Horizontal</p>&ndash;&gt;-->
      <!--  &lt;!&ndash;<a-col   >&ndash;&gt;-->
      <!--      &lt;!&ndash;v-if="item.questionType != 0"&ndash;&gt;-->
      <!--  &lt;!&ndash;&gt;&ndash;&gt;-->
      <!--    <ChainItem-->
      <!--        :index="index"-->
      <!--        :title="item.total"-->
      <!--        chart-type="bar"-->
      <!--        quota="retentionTrends"-->
      <!--    />-->
      <!--  &lt;!&ndash;</a-col>&ndash;&gt;-->
      <!--</div>-->

      <a-col
        v-for="(item, index) in questionData"
        :key="index"
        :span="8"
        style="margin-top: 20px; margin-bottom: 30px"
      >
        <WordCloud
          v-if="item.chartType == 'wordcloud'"
          :title="item.stem"
          :count="item.total"
          style="height: 300px"
          quota="retentionTrends"
        />

        <ChainItem
          v-else
          :title="item.stem"
          :index="index"
          :count="item.total"
          :chart-type="item.chartType"
          style="height: 300px"
          quota="retentionTrends"
        />
      </a-col>

      <!--<a-col :span="12">-->
      <!--  <ChainItem-->
      <!--      :title="$t('multiDAnalysis.card.title.userRetention')"-->
      <!--      quota="userRetention"-->
      <!--      chart-type="bar"-->
      <!--  />-->
      <!--</a-col>-->
      <!--<a-col :span="12">-->
      <!--  <ChainItem-->
      <!--      :title="$t('multiDAnalysis.card.title.contentConsumptionTrends')"-->
      <!--      quota="contentConsumptionTrends"-->
      <!--      chart-type="line"-->
      <!--  />-->
      <!--</a-col>-->
    </a-row>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import questionDataSurveyStore from '@/store/modules/data-screen';
  import ChainItem from './chain-item.vue';
  import WordCloud from './word-cloud.vue';

  const question = questionDataSurveyStore();
  const questionData = ref(question.questions);
</script>
